<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>源码分析前的准备工作</title>
    <script src="./js/mvvm.js"></script>
    <script src="./js/compile.js"></script>
    <script src="./js/watcher.js"></script>
    <script src="./js/observer.js"></script>
</head>
<body>
<div id="root">
    <ul>
        <li>数据更新了</li>
        <li>数据更新了</li>
        <li>数据更新了</li>
    </ul>

</div>
<script type="text/javascript">
    //拿到box所有的节点 有三个 全部转移到 fragment 页面上就没有
    const childNodes = document.getElementById('root').childNodes
    //创建碎片容器
    const fragment = document.createDocumentFragment()
    let child
    while (child = childNodes[0]) {
        fragment.appendChild(child)//把页面的节点转移走了
    }
    //在fragment里面修改数据 fragment.childNodes[1].children 得到li 伪数组 转成真数组 然后遍历
    Array.prototype.slice.call(fragment.childNodes[1].children).forEach(item => item.innerHTML = '明天天气怎么样')
    //把修改好的文档碎片返回去,fragment本身不会进页面 它里面的所有东西会进入页面
    document.getElementById('root').appendChild(fragment)
</script>
</body>
</html>